<template>
  <div>
    <!-- <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="top-div">
            <img src="../../assets/img-1.png" alt>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-div">
            <img src="../../assets/img-2.png" alt>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-div">
            <img src="../../assets/img-3.png" alt>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-div">
            <img src="../../assets/img-4.png" alt>
          </div>
        </el-col>
      </el-row>
    </div>-->
    <div class="tableDiv">
      <div style="margin-bottom:20px">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleClick">新增</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%" class="custom-table">
        <el-table-column prop="a1" label="承运商编号" width="150px"></el-table-column>
        <el-table-column prop="a2" label="‌承运商名称" width="100px"></el-table-column>
        <el-table-column prop="a3" label="‌联系方式" width="100px"></el-table-column>
        <el-table-column prop="a4" label="地址信息" width="200px"></el-table-column>
        <el-table-column prop="a5" label="资质证明" width="auto"></el-table-column>
        <el-table-column prop="a6" label="‌车辆信息 " width="auto"></el-table-column>
        <el-table-column prop="a7" label="‌服务范围 " width="160px"></el-table-column>
        <el-table-column prop="a8" label="信誉评级 " width="auto"></el-table-column>
        <el-table-column prop="a9" label="合作历史 " width="80px"></el-table-column>
        <el-table-column prop="a10" label="评价和反馈 " width="100px"></el-table-column>
        
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small">删除</el-button>
            <el-button type="text" size="small" @click="handleClick">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top:20px">
        <el-pagination background layout="prev, pager, next" :total="100"></el-pagination>
      </div>
    </div>
    <div>
      <el-dialog title="承运商信息" :visible.sync="dialogVisible" width="800px">
        <div>
          <el-form :inline="true" :model="formInline" label-width="100px">
            <el-form-item label="承运商编号">
              <el-input v-model="formInline.user1" placeholder="承运商编号"></el-input>
            </el-form-item>
            <el-form-item label="承运商名称">
              <el-input v-model="formInline.user2" placeholder="承运商编号"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input v-model="formInline.user3" placeholder="联系方式"></el-input>
            </el-form-item>
            <el-form-item label="地址信息">
              <el-input v-model="formInline.user4" placeholder="地址信息"></el-input>
            </el-form-item>
            <el-form-item label="资质证明">
              <el-input v-model="formInline.user5" placeholder="资质证明"></el-input>
            </el-form-item>
            <el-form-item label="车辆信息">
              <el-input v-model="formInline.user6" placeholder="车辆信息"></el-input>
            </el-form-item>
            <el-form-item label="服务范围">
              <el-input v-model="formInline.user7" placeholder="服务范围"></el-input>
            </el-form-item>
            <el-form-item label="信誉评级">
              <el-input v-model="formInline.user8" placeholder="信誉评级"></el-input>
            </el-form-item>
            <el-form-item label="合作历史">
              <el-input v-model="formInline.user9" placeholder="评价和反馈"></el-input>
            </el-form-item>
          </el-form>

          
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false" size="small">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [
        {
          a1: "1Z698X1233455566",
          a2: "UPS",
          a3: "18210294830",
          a4: "江苏省南通市长春路1250号",
          a5: "企业资质",
          a6: "回程车",
          a7: "超大件运输",
          a8: "五级",
          a9: "168",
          a10: "A+"
        },
        {
          a1: "1ZC51W1233455566",
          a2: "宏远",
          a3: "15130491029",
          a4: "陕西省下回市副春路1350号",
          a5: "企业资质",
          a6: "大板车",
          a7: "大件运输",
          a8: "四级",
          a9: "100",
          a10: "A"
        },
        {
          a1: "1Y123X1233455566",
          a2: "XUD",
          a3: "15050102930",
          a4: "河南省洛阳市开元大道281号",
          a5: "车辆资质",
          a6: "高栏车",
          a7: "设备运输",
          a8: "二级",
          a9: "25",
          a10: "B"
        },
        {
          a1: "1Z698X1233455566",
          a2: "国药",
          a3: "16839504812",
          a4: "吉林省长春市人民大街22号",
          a5: "企业资质",
          a6: "大板车",
          a7: "超大件运输",
          a8: "三级",
          a9: "88",
          a10: "B+"
        },
        {
          a1: "1Y165X1876655566",
          a2: "ZDY",
          a3: "18234568090",
          a4: "吉林省延吉市公园路22号",
          a5: "车辆资质",
          a6: "回程车",
          a7: "小件运输",
          a8: "一级",
          a9: "19",
          a10: "C"
        },
        {
          a1: "1ZC51W1233455566",
          a2: "瑞迪",
          a3: "18234561230",
          a4: "吉林省长春市硅谷大街168号",
          a5: "车辆资质",
          a6: "回程车",
          a7: "小件运输",
          a8: "四级",
          a9: "127",
          a10: "A"
        },
        {
          a1: "1Z698X12334234555",
          a2: "UPS",
          a3: "18210292450",
          a4: "江苏省南通市长春路234号",
          a5: "企业资质",
          a6: "回程车",
          a7: "大件运输",
          a8: "五级",
          a9: "500",
          a10: "A+"
        },
        {
          a1: "1CX612Z33423455",
          a2: "AUZ",
          a3: "1821011020",
          a4: "云南省昆明市东风西路123号",
          a5: "车辆资质",
          a6: "高栏车",
          a7: "大件运输",
          a8: "四级",
          a9: "346",
          a10: "A"
        }
      ],
      formInline: {
        user: "",
        user1: "",
        user2: "",
        user3: "",
        user4: "",
        user5: "",
        user6: "",
        user7: "",
        user8: "",
        user9: "",
        region: ""
      }
    };
  },
  methods: {
    handleClick() {
      this.dialogVisible = true;
    },
    onSubmit() {
      console.log("submit!");
    }
  }
};
</script>
<style scoped >
.top-div {
  width: 100%;
  /* background-color: #fff; */
}
.top-div img {
  width: 100%;
  height: 100%;
}
.tableDiv {
  background-color: #fff;
  margin-top: 20px;
  padding: 20px;
}
.custom-table /deep/ .el-table__body td {
  font-size: 12px; /* 你想要的字体大小 */
}
</style>


